<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
    <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
  </head>

<title>BHM@RAMA8 V0.1.1 - History</title>
<style>
	.font1{
		text-align: center;
		font-size: 10px; 
		font-family: MS Sans Serif, Tahoma, sans-serif;
		font-weight: bold;
	}
</style>
<style type="text/css">
    #bordered {
      border: 1px solid red;
    }
	.infotext {  }
	#div_g .dygraph-label { font-family: Georgia,Verdana,serif; }
	#div_g .dygraph-title { font-size: 36px; text-shadow: 2px 2px 2px gray; }
	#div_g .dygraph-ylabel { font-size: 18px; text-shadow: -2px 2px 2px gray; }
	.chart { border: 1px dashed black; margin: 5px 5px 5px 50px; padding: 2px; }
</style>
<?php			
// Load the calendar class
	require('calendar/tc_calendar.php');
      $date1_default = "";//"2013-07-22";
      $date2_default = "";//2013-07-28";
?>
</head>

<body>
<p>Display - &gt; History</p>
<p align="center"><a href="mainmenu.php">Back</a></p>

<table width="800" border="0">
  <tr>
    <td width="365">Select a set of responses for monitoring </td>
    <td width="100">Begin..</td>
    <td width="100">End..</td>
    <td width="102">Time Unit</td>
    <td width="111">Response</td>
  </tr>
  <tr>
    <td><select name="set_responses2" id="set_responses2">
      <option selected="selected">Temp and Displacement</option>
      <option>Set 2</option>
      <option>Set 3</option>
      <option>Set 4</option>
    </select></td>
    <td><form id="form1" name="form1" method="post" action="">
      <label for="begin"></label>
      <input name="begin" type="text" id="begin" value="1/1/2012"  width="100"/>

    <?php  
	  $myCalendar = new tc_calendar("date2", true, false);
	  $myCalendar->setIcon("calendar/images/iconCalendar.gif");
	  $myCalendar->setDate(date('d', strtotime($date2_default)),date('m', strtotime($date2_default)),date('Y', strtotime($date2_default)));
	  $myCalendar->setPath("calendar/");
	  $myCalendar->setYearInterval(2013, 2013);
	  $myCalendar->setAlignment('left', 'bottom');
	  $myCalendar->setDatePair('date1', 'date2', $date1_default);
	  $myCalendar->writeScript();	  
	?>
	
	</form></td>
    <td><form id="form2" name="form2" method="post" action="">
      <label for="end"></label>
      <input name="end" type="text" id="end" value="1/1/2012"  width="100"/>
	<?php
	  $myCalendar = new tc_calendar("date1", true, false);
	  $myCalendar->setIcon("calendar/images/iconCalendar.gif");
	  $myCalendar->setDate(date('d', strtotime($date1_default)),date('m', strtotime($date1_default)),date('Y', strtotime($date1_default)));
	  $myCalendar->setPath("calendar/");
	  $myCalendar->setYearInterval(2013, 2013);
	  $myCalendar->setAlignment('left', 'bottom');
	  $myCalendar->setDatePair('date1', 'date2', $date2_default);
	  $myCalendar->writeScript();	 
	  ?>
	</form></td>
    <td><select name="within2" id="within2">
      <option selected="selected">1 Min</option>
      <option>1 Hour</option>
</select></td>
    <td><select name="response2" id="response2">
      <option selected="selected">Value</option>
      <option>Level</option>
    </select></td>
  </tr>
</table>
Graph1
<div id="graphdiv" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 5,showRoller: false}          // options

  );
</script>

Graph2
<div id="graphdiv2" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv2"), "realtime-graph2.csv", // path to CSV file
	{
	  'DM1': {
		plotter: Dygraph.Plotters.linePlotter, // plot àÊé¹
		strokePattern: Dygraph.DASHED_LINE // àÊé¹»Ð
	  },
	  'DM2': {
		plotter: Dygraph.Plotters.linePlotter,
		strokePattern: Dygraph.DASHED_LINE
	  },
	  'DM3': {
		plotter: Dygraph.Plotters.linePlotter,
		strokePattern: Dygraph.DASHED_LINE
	  },
	  colors: ["green","blue","red"]  // ¡ÓË¹´ä´éËÅÒÂáºº "rgb(51,204,204)","#00DD55" 
	});  
  </script>
  Graph3
<div id="graphdiv3" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv3"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 1,showRoller: false}          // options
  );
</script>
Graph4
<div id="graphdiv4" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv4"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 15,showRoller: false}          // options
  );
</script>
Graph5
<div id="graphdiv5" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv5"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 35,showRoller: false}          // options
  );
</script>
Graph6
<div id="graphdiv6" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv6"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 25,showRoller: false}          // options
  );
</script>

</body>
</html>
